<template>
    <el-col :span="3">
        <div class="cart-dl">
            <div class="prod-img"><img class="cart-img" :title="item.product_name" :src="item.product_mphoto_url? item.product_mphoto_url : emptyImg"  style="max-width:80px; max-height:80px" /></div>
            <div class="font08 prod-dd" :title="item.product_name">{{item.product_name}}</div>
            <div style="margin-top:5px;">
                <el-select v-model="item.product_id" filterable placeholder="Pick a package" size="mini" class="cleanse-obj"  @change="changeProduct($event)">
                    <el-option
                    v-for="prodct in productList"
                    :key="prodct.id"
                    :label="prodct.name"
                    :value="prodct.id">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-top:5px;">
                <input type="hidden" v-model="item.product_id" name="product_id[]">
                <el-select v-model="item.qty" name="qty[]" class="filter-item" size="mini" @change="changeQty">
                    <el-option v-for="(option, dex) in quantOptions" :key="dex" :label="option" :value="option" />
                </el-select>
            </div>
        </div>
    </el-col>
</template>
<script>
export default {
    props: {
        itemObj: {
            type: Object,
            default () {
                return {
                    qty: 1
                }
            }
        },
        idx: Number,
        productList: Array
    },
    data () {
        return {
            quantOptions: [0, 1, 2, 3],
            item: {
                product_name: '',
                product_scode: '',
                product_lang: '',
                product_id: '',
                product_mphoto: '',
                product_mphoto_url: '',
                location_id: '',
                area_region_id: ''
            },
            groups: this.groupData,
            emptyImg: require('../../assets/empty01.jpg')
        }
    },
    created () {
        let num = []
        if (this.itemObj.mqty) {
            for (let i = 0; i < this.itemObj.mqty + 1; i++) {
                num.push(i)
            }
            this.quantOptions = num
        }
    },
    mounted () {
        /* var data = {}
        data.product_name = this.itemObj.name
        data.product_scode = this.itemObj.scode
        data.product_lang = this.itemObj.lang
        data.product_id = this.itemObj.id
        data.product_mphoto = this.itemObj.mphoto
        data.product_mphoto_url = this.itemObj.mphoto_url */
        
        this.item = this.itemObj
        this.item.qty = this.item.qty || this.item.qty === 0 ? this.item.qty : this.item.dqty || this.item.dqty === 0 ? this.item.dqty : 1
    },
    watch: {
        itemObj: function(val) {
            this.item = val
            this.item.qty = this.item.qty || this.item.qty === 0 ? this.item.qty : this.item.dqty || this.item.dqty === 0 ? this.item.dqty : 1
            let num = []
            let mqty = val.mqty ? val.mqty  + 1 : val.qty > 3 ? val.qty + 1 : 4
            for (let i = 0; i < mqty; i++) {
                num.push(i)
            }
            this.quantOptions = num
        }
    },
    methods: {
        changeProduct (id) {
            let val ={}
            for (let i=0; i<this.productList.length; i++) {
                if(this.productList[i].id === id) {
                    val = this.productList[i]
                }
            }
            console.log('val', val)
            let data = {}
            data.product_name = val.name
            data.product_scode = val.scode
            data.product_lang = val.lang
            data.product_id = val.id
            data.product_mphoto = val.mphoto
            data.product_mphoto_url = val.mphoto_url
            data.product = Object.assign({}, val)
            data.qty = val.dqty || val.dqty === 0 ? val.dqty : 1,
            data.area_region_id = ''
            this.item = data
            this.$emit('change-product', data, this.idx)
        },
        changeQty () {
            //this.$emit('ret-group', this.productData, this.idx)
            //this.groups.product[this.idx] = this.productData
            // console.log(this.item)
            console.log(this.item)
            this.$emit('change-product', this.item, this.idx)
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.cart-dl{
    min-height:120px;
    overflow:hidden;
    text-align: center;
    .prod-img{
        min-height:86px;
    }
    .prod-dd{
        height:25px;
        overflow:hidden;
    }
}
</style>
